<template>
  <div class="bgc_blue">
    <div v-if="binding == 'sj'">
      <img src="@/assets/imgs/chahua.png">
      <div class="content">
        <div class="content_img mt15" style="margin-left: 70px;!important;">
          <img src="@/assets/imgs/bangding.png">
          <span class="content_text1">绑定手机号</span>
        </div>
        <div class="content_img mt35">
          <img src="@/assets/imgs/jiantou.png">
        </div>
        <div class="content_img mt15">
          <img src="@/assets/imgs/zhuce.png">
          <span class="content_text2">绑定会员卡</span>
        </div>
        <div class="content_enter">
          <img src="@/assets/imgs/shouji.png" class="fl">
          <input class="content_enter_text" placeholder="请输入您的手机号" v-model="phoneNumber">
          <hr class="content_enter_line1">
        </div>
        <div class="content_enter mt20">
          <img src="@/assets/imgs/shouji.png" class="fl">
          <input class="content_enter_text" placeholder="请输入短信验证码">
          <span class="content_enter_name" @click="getVerificationCode()">获取验证码</span>
          <hr class="content_enter_line2">
        </div>
        <button class="content_button" @click="goto('hyk')">
          <span class="content_button_text">下一步</span>
        </button>
      </div>
    </div>
    <div v-if="binding == 'hyk'">
      <img src="@/assets/imgs/chahua.png">
      <div class="content">
        <div class="content_img mt15" style="margin-left: 70px;!important;">
          <img src="@/assets/imgs/bangding.png">
          <span class="content_text1">绑定手机号</span>
        </div>
        <div class="content_img mt35">
          <img src="@/assets/imgs/jiantou.png">
        </div>
        <div class="content_img mt15">
          <img src="@/assets/imgs/zhuce_xuan.png">
          <span class="content_text2">绑定会员卡</span>
        </div>
        <div class="content_enter">
          <img src="@/assets/imgs/shouji.png" class="fl">
          <input class="content_enter_text" type="text" v-model="cardId" placeholder="请输入您的会员卡号"/>
          <hr class="content_enter_line1">
        </div>
        <button class="content_button" @click="bindMemmberCard()">
          <span class="content_button_text">完成绑定</span>
        </button>
        <button class="content_button mt10" @click="goto('sj')">
          <span class="content_button_text">上一步</span>
        </button>
        <div class="content_prompt" @click="goto('xhy')">没有会员卡？去注册 >></div>
      </div>
    </div>

    <div v-if="binding == 'xhy'">
      <img src="@/assets/imgs/chahua.png">
      <div class="content">
        <div class="content_img mt15" style="margin-left: 70px;!important;">
          <img src="@/assets/imgs/bangding.png">
          <span class="content_text1">绑定手机号</span>
        </div>
        <div class="content_img mt35">
          <img src="@/assets/imgs/jiantou.png">
        </div>
        <div class="content_img mt15">
          <img src="@/assets/imgs/zhuce_xuan.png">
          <span class="content_text2">注册新会员</span>
        </div>
        <div class="content_enter">
          <img src="@/assets/imgs/xingming.png" class="fl">
          <input class="content_enter_text" v-model="cardName" placeholder="请输入您的姓名">
          <hr class="content_enter_line1">
        </div>
        <div class="content_enter mt20">
          <!--<img src="@/assets/imgs/dizhi.png" class="fl">-->
          <JL-Address label="现居地址" v-model="addressList"/>
          <!--<input class="content_enter_text" v-model="cardAddress" placeholder="请输入您的现居地址">-->
          <!--<hr class="content_enter_line2">-->
        </div>
        <button class="content_button" @click="registerMember()">
          <span class="content_button_text">完成注册</span>
        </button>
        <button class="content_button mt10 mb10" @click="goto('hyk')">
          <span class="content_button_text">上一步</span>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BindingPage',
    data () {
      return {
        binding: 'sj',
        phoneNumber: '',
        cardId: '',
        cardName: '',
        cardAddress: '',
        addressList: []
      }
    },
    methods: {
      goto (item) {
        this.binding = item
      },
      getVerificationCode () {
        if ($Util.isNull(this.phoneNumber)) {
          $Util.toast({
            message: '请输入手机号码',
            position: 'middle'
          })
          return
        }
        $Util.loading()
        this.$inbound.invoke({
          interfaceId: 'app.member.getVerificationCode',
          data: {phoneNumber: this.phoneNumber}
        }).then(msg => {
          $Util.hideloading()
          console.log(msg)
        }).catch(e => {
          $Util.hideloading()
          console.log(e)
          $Util.toast({
            message: e.MESSAGE,
            position: 'middle'
          })
        })
      },
      bindMemmberCard () {
        if ($Util.isNull(this.cardId)) {
          $Util.toast({
            message: '请输入您的会员卡号',
            position: 'middle'
          })
          return
        }
        $Util.loading()
        this.$inbound.invoke({
          interfaceId: 'app.member.bindMemmberCard',
          data: {cardId: this.cardId}
        })
          .then(v => {
            $Util.hideloading()
            if (v.isCard) {
              localStorage.setItem('card_stats', 1)
              this.$router.replace({path: '/'})
            }
          })
          .catch(e =>{
            $Util.hideloading()
            $Util.toast({
              message: e.MESSAGE,
              position: 'middle'
            })
          })
      },
      registerMember () {
        if ($Util.isNull(this.cardName)) {
          $Util.toast({
            message: '请输入您的姓名',
            position: 'middle'
          })
          return
        }
        if ($Util.isNull(this.addressList)) {
          $Util.toast({
            message: '请输入您的地址',
            position: 'middle'
          })
          return
        }
        this.$inbound.invoke({
          interfaceId: 'app.member.registerMember',
          data: {dzlist: this.addressList,NAME:this.cardName,PHONE:this.phoneNumber}
        })
          .then(msg => {
          })
      }
    }
  }
</script>

<style scoped>
  .bgc_blue {
    background-color: #527efd;
  }

  .content {
    float: left;
    width: calc(100% - 30px);
    height: 300px;
    background-color: #fff;
    border-radius: 5px;
    margin-left: 15px;
  }

  .content_img {
    float: left;
    text-align: center;
    width: 20%;
  }

  .content_text1 {
    position: absolute;
    top: 272px;
    left: 86px;
    font-family: 'pingfang bold';
    font-size: 13px;
    color: #333;
  }

  .content_text2 {
    position: absolute;
    top: 272px;
    left: 224px;
    font-family: 'pingfang bold';
    font-size: 13px;
    color: #333;
  }

  .content_enter {
    float: left;
    width: calc(100% - 60px);
    margin: 40px 0 0 30px;
  }

  .content_enter_text {
    float: left;
    margin-left: 10px;
    font-family: 'pingfang medium';
    font-size: 13px;
    color: #ccc;
  }

  .content_enter_name {
    float: right;
    margin-left: 10px;
    font-family: 'pingfang bold';
    font-size: 15px;
    color: #5581FF;
  }

  .content_enter_line1 {
    position: absolute;
    top: 340px;
    width: calc(100% - 90px);
    height: 1px;
    color: #ebebeb;
  }

  .content_enter_line2 {
    position: absolute;
    top: 385px;
    width: calc(100% - 90px);
    height: 1px;
    color: #ebebeb;
  }

  .content_button {
    float: left;
    background-color: #4D7AFA;
    border-radius: 100px;
    width: calc(100% - 60px);
    height: 45px;
    margin: 25px 0 0 30px;
  }

  .content_button_text {
    font-family: 'pingfang bold';
    font-size: 18px;
    color: #fff;
  }

  .content_prompt {
    float: left;
    width: calc(100% - 60px);
    margin: 10px 0 0 30px;
    text-align: center;
    font-family: 'pingfang medium';
    font-size: 15px;
    color: #999;
  }
</style>
